/**
 * 针对cms系统进行Form表单和Table等数据信息的低代码编辑
 */
import React from "react";
import { Tabs, Modal, PageHeader, Button } from "antd";
import { tabsConfig, wrapperComp } from "./config";
import { connect } from "react-redux";
import { DndProvider } from "react-dnd";
import { HTML5Backend } from 'react-dnd-html5-backend';
import ReactJson from 'react-json-view';
import CompControl from "./components/CompControl";
import CMSCompWrapper from "./components/CMSCompWrapper";
import SettingTable from "./components/SettingTable";
import CMSComponent from "./components/CMSComponent";
import { IState } from "store/reducers/cms";
import { transformChildrenToProps } from "utils/cmsTransform";
import { DELETE_CMS_NODE } from "store/constants";
import "./index.scss";
const { TabPane } = Tabs;

interface ICMSEditor {
    cms: IState;
    deleteCurrentNode: () => void;
}
interface ICMSEditorState {
    previewVisible: boolean;
}
class CMSEditor extends React.Component<ICMSEditor, ICMSEditorState> {
    state: ICMSEditorState = {
        previewVisible: false
    }
    // 监听键盘键按下
    handleKeyUp = (e: KeyboardEvent) => {
        switch(e.key){
            case "Backspace":
            case "Delete":
                 if(!["input", "textarea", "text"].includes((e.target as any).type as string)){
                     this.props.deleteCurrentNode();
                 }
                 break;
            default:
                break;
        }
    }
    componentDidMount(){
         document.addEventListener("keyup", this.handleKeyUp, false);
    }
    componentWillUnmount(){
         document.removeEventListener("keyup", this.handleKeyUp, false);
    }
    render(){
        const { cms } = this.props;
        const { previewVisible } = this.state;
        return <div className="cms-editor-wrapper">
            <PageHeader className="cms-page-header">
                <Button type="primary" onClick={() => this.setState({previewVisible: true})}>预览</Button>
            </PageHeader>
                <div className="cms-editor-container">
                    <div className="left-component-wrapper">
                        <Tabs defaultActiveKey={tabsConfig.defaultKey} className="tab-wrapper">
                            {
                                tabsConfig.tabs.map(config => {
                                    return (<TabPane tab={config.title} key={config.key}>
                                        <CompControl title={"基础组件"} compList={config.baseComp} wrapper={true} />
                                        <CompControl title={"组件控件"} compList={config.compControl} />
                                    </TabPane>)
                                })
                            }
                        </Tabs>
                    </div>
                    <div className="main-edit-wrapper">
                        <div className="main-edit-scroll">
                            <div className="editor-main">
                                <DndProvider backend={(HTML5Backend as any)}>
                                    {
                                        cms.config.map(item => {
                                            const childrenProps = transformChildrenToProps(item.children, item.component, false, item);
                                            return <CMSCompWrapper id={item.id} isWrapper={wrapperComp.includes(item.component)}>
                                                <CMSComponent is={item.component} {...item.props} {...childrenProps}></CMSComponent>
                                            </CMSCompWrapper>
                                        })
                                    }
                                </DndProvider>
                            </div>
                        </div>
                    </div>
                    <div className="right-attribute-wrapper">
                        <SettingTable />
                    </div>
            </div>
            <Modal 
                visible={previewVisible}
                width={"80vw"}
                closable={false}
                onCancel={() => this.setState({previewVisible: false})}
                okText={"保存"}
                cancelText={"取消"}
                className="preview-modal"
                centered
            >
                <div className="preview-container">
                    <div className="preview-wrapper">
                    {
                        cms.config.map(item => {
                            const childrenProps = transformChildrenToProps(item.children, item.component, true, item);
                            return <CMSComponent is={item.component} {...item.props} {...childrenProps}></CMSComponent>
                        })
                    }          
                    </div>
                    <div className="preview-config">
                        <ReactJson src={cms.config} />
                    </div>
                </div>
            </Modal>
        </div>
    }
}

export default connect((state: any) => {
    return {
        cms: state.cms
    }
}, dispatch => {
    return {
        deleteCurrentNode: () => dispatch({type: DELETE_CMS_NODE})
    }
})(CMSEditor);